<template >
  <div id="header">
    <Header></Header>
  </div>
  <div id="main" class="inner home-inner">
    <div class="item">
      <h5 class="mb-2">个人中心</h5>
      <el-menu default-active="userresume" class="el-menu-vertical-demo">
        <el-menu-item index="userresume" @click="showResume()">
          <span>个人简历</span>
        </el-menu-item>
        <el-sub-menu index="userinfomanage">
          <template #title>
            <span>信息管理</span>
          </template>
          <!-- <el-menu-item index="basicInfo" route="/userhome/basicInfo" @click="showInfoManage()">基本信息</el-menu-item> -->
          <el-menu-item index="setAccount" @click="setAccount()">账号设置</el-menu-item>
          <el-menu-item index="accountCancellation" @click="accountCancellation()">账号注销</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="userJobLog">
          <template #title>
            <span>求职记录</span>
          </template>
          <el-menu-item index="userApplyJob" @click="setApplyJob()">已申请</el-menu-item>
          <el-menu-item index="userCollectionJob" @click="setUserCollectionJob()">已收藏</el-menu-item>
        </el-sub-menu>

      </el-menu>
    </div>
    <div class="content">
      <UserResume v-if="isShowResume" />
      <!-- <UserBasicInfo v-if="isShowInfo"/> -->
      <UserAccountSet v-if="isShowAccount" />
      <UserApplyJob v-if="isUserApplyJob" />
      <UserCollectionJob v-if="isUserCollectionJob" />
    </div>
  </div>
  <!-- 身份校验 -->
  <el-dialog v-model="isUserAccountCancellation" title="身份校验" width="40%" modal destroy-on-close>
    <el-form ref="vPwdForm" :model="form" :rules="loginRules">
      <el-form-item label="账号" :label-width="formLabelWidth">
        <el-input v-model="form.email" autocomplete="off" readonly style="width: 400px;" />
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
        <el-input v-model="form.password" autocomplete="off" type="password" style="width: 400px;" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isUserAccountCancellation = false">取消</el-button>
        <el-button type="success" @click="handle(vPwdForm)">提交</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="sureCancellationDialog" title="提示" width="30%" modal :open-delay="500" destroy-on-close>
    <div class="dialog-tips">
      <el-icon color="#E6A23C">
        <InfoFilled />
      </el-icon>
      <p style="padding-top: 0.5px;">是否确认注销?</p>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="sureCancellationDialog = false">取消</el-button>
        <el-button type="success" @click="isSureCancellation()">提交</el-button>
      </span>
    </template>
  </el-dialog>
  <div id="footer" >
    <Footer></Footer>
  </div>
</template>
<script lang='ts' setup>
import { InfoFilled } from '@element-plus/icons-vue'
import UserResume from "@/components/user/UserResume.vue"
import UserBasicInfo from "@/components/user/UserBasicInfo.vue"
import UserAccountSet from "@/components/user/UserAccountSet.vue"
import UserApplyJob from "@/components/user/UserApplyJob.vue"
import UserCollectionJob from "@/components/user/UserCollectionJob.vue"
import { ref, onMounted, reactive, getCurrentInstance, computed, onBeforeMount } from "vue"
import { useRoute, useRouter } from 'vue-router'
import { useStore } from "vuex"
import { userMenu } from "@/utills/data"
// 第一个表单是校验邮箱和密码，所以就用登录的表单校验方式
import { loginUser, loginRules } from "@/utills/loginValidators";
import { pwdVerify, pwdVerifyRules, emailVerify, emailVerifyRules, phoneVerify, PhoneVerifyRules } from "@/utills/accountSetValidators";
import { vUserPwd, userAccountCancellation } from "@/api/userApi"
import type { FormInstance, FormRules } from 'element-plus'
import { elmessage, data } from "@/hook/hook"
import { getLoginState } from "@/api/authApi"

const store = useStore()
const router = useRouter()
// @ts-ignore
const { proxy } = getCurrentInstance() // 1.获取proxy实例
const route = useRoute()

const vPwdForm = ref<FormInstance>()

const sureCancellationDialog = ref(false)
const formLabelWidth = '140px'
const form = reactive({
  email: computed(() => store.state.userState.userBasicInfo.email),
  password: "",
  changeType: ""
})

// 打开第二个对话框
const handle = async (formEl: FormInstance | undefined) => {
  // isUserAccountCancellation.value=false
  if (!formEl) return
  // formEl.resetFields()
  await formEl.validate((valid, fields) => {
    if (valid) {
      const newData = {
        ...data(),
        password: form.password
      }
      vUserPwd(newData).then((res: any) => {
        if (res.data["code"] == "200") {
          isUserAccountCancellation.value = false
          formEl.resetFields()
          sureCancellationDialog.value = true
        } else if (res.data["code"] == "301") {
          elmessage(res.data["message"], res.data["type"])
        }
        else {
          console.log("身份验证错误");

        }
      })
    }
  })
}

const isSureCancellation = async () => {
  sureCancellationDialog.value = false
  userAccountCancellation(data()).then((res: any) => {
    if (res.data["code"] == "200") {
      elmessage(res.data["message"], res.data["type"])
      router.replace("/")
      store.commit("loginOut")
      
      localStorage.removeItem("loginData")
    } else {
      console.log("账号注销错误");

    }
  })


}
const isShowResume = ref(true)
const isShowInfo = ref(false)
const isShowAccount = ref(false)
const isUserApplyJob = ref(false)
const isUserCollectionJob = ref(false)
const isUserAccountCancellation = ref(false)

const showResume = () => {
  isShowResume.value = true
  isShowInfo.value = false
  isShowAccount.value = false
  isUserApplyJob.value = false
  isUserCollectionJob.value = false
  isUserAccountCancellation.value = false
}
const showInfoManage = () => {
  isShowResume.value = false
  isShowInfo.value = true
  isShowAccount.value = false
  isUserApplyJob.value = false
  isUserCollectionJob.value = false
  isUserAccountCancellation.value = false
}
const setAccount = () => {
  isShowResume.value = false
  isShowInfo.value = false
  isShowAccount.value = true
  isUserApplyJob.value = false
  isUserCollectionJob.value = false
  isUserAccountCancellation.value = false
}
const setApplyJob = () => {
  isShowResume.value = false
  isShowInfo.value = false
  isShowAccount.value = false
  isUserApplyJob.value = true
  isUserCollectionJob.value = false
  isUserAccountCancellation.value = false
}
const setUserCollectionJob = () => {
  isShowResume.value = false
  isShowInfo.value = false
  isShowAccount.value = false
  isUserApplyJob.value = false
  isUserCollectionJob.value = true
  isUserAccountCancellation.value = false
}
const accountCancellation = () => {

  isUserAccountCancellation.value = true

}






// 采用async
const getUserInfo = async () => {
  // 请求后端，请求用户头像
  proxy.$api.userApi.getUserInfo(data()).then((res: any) => {
    // console.log(res.data,"111");
    if (res.data["code"] == "200") {
      
      
      // 基本信息
      store.state.userState.userBasicInfo.name = res.data.name
      store.state.userState.userBasicInfo.gander = res.data.gander
      store.state.userState.userBasicInfo.birth = res.data.birth
      store.state.userState.userBasicInfo.birthAddress = res.data.birthAddress
      store.state.userState.userBasicInfo.newAddress = res.data.newAddress
      store.state.userState.userBasicInfo.politicalOutlook = res.data.politicalOutlook
      store.state.userState.userBasicInfo.phone = res.data.phone
      store.state.userState.userBasicInfo.email = res.data.email
      // 求职状态
      store.state.userState.userJobState = res.data.jobState

      // 求职意向
      store.state.userState.userJobIdens.title = res.data.jobTitle
      store.state.userState.userJobIdens.salaryMin = res.data.jobSalary[0]
      store.state.userState.userJobIdens.salaryMax = res.data.jobSalary[1]
      store.state.userState.userJobIdens.city = res.data.jobCity
      store.state.userState.userJobIdens.jobNature = res.data.jobNature
      store.state.userState.userJobIdens.industry = res.data.jobIndustry
      // 教育经历
      store.state.userState.userEdu.schoolName = res.data.eduSchoolName
      store.state.userState.userEdu.education = res.data.eduEducation
      store.state.userState.userEdu.major = res.data.eduMajor
      store.state.userState.userEdu.schoolTime = res.data.schoolTime
      store.state.userState.userEdu.eduMajorDetail = res.data.eduMajorDetail
      // 工作经历
      store.state.userState.userJobEx.jobExTime = res.data.jobExTime
      store.state.userState.userJobEx.jobExEnterprise = res.data.jobExEnterprise
      store.state.userState.userJobEx.jobExLevel = res.data.jobExLevel
      store.state.userState.userJobEx.jobExDetail = res.data.jobExDetail
      // 项目经验
      store.state.userState.userProjectEx.projectTime = res.data.projectTime
      store.state.userState.userProjectEx.projectEnterprise = res.data.projectEnterprise
      store.state.userState.userProjectEx.projectName = res.data.projectName
      store.state.userState.userProjectEx.projectDetail = res.data.projectDetail

      // 荣誉奖项
      store.state.userState.userHonors = res.data.userHonors
      // 自我评价
      store.state.userState.userSelfEvaluation = res.data.userSelfEvaluation
    } else {
      console.log("获取用户基本信息失败");

    }

  })

}
// 检查登录状态
const getloginstate = () => {
  getLoginState(data()).then((res: any) => {
    if (res.data["code"] == "200") {
      if (res.data["isLogin"] == "false") {
        router.push("/")
        store.commit("loginOut")
        // console.log(res.data["message"]);
        localStorage.removeItem("loginData")
      } else {
      }
    } else {
      // console.log(res.data["message"]);
      localStorage.removeItem("loginData")
    }
  })
}

onMounted(async () => {
  await getloginstate()
  getUserInfo()

})

</script>
<style scoped>
.dialog-tips {
  display: flex;
  /* height: 30px; */
  width: 200px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.inner {
  width: 1200px;
  margin: 0 auto;
}

.home-inner {
  max-width: 1200px;
}

#header {
  font-family: '微软雅黑';
  height: 58px;
  background-color: #545c64;
}

#main {
  margin-top: 25px;
  margin-bottom: 80px;
  /* height: 1200px; */
  display: flex;
}

.content {
  margin-left: 20px;
  width: 950px;
  height: auto;
  /* background-color: red; */
}

.mb-2 {
  font-family: '微软雅黑';
  border-bottom-style: solid;
  height: 27px;
  width: 75px;
  display: flex;
  align-items: center;
  border-width: 2px;
  margin-bottom: 5px;
  border-bottom-color: #7777e7;
}

.item {
  width: 150px;
  /* background-color: #FFF; */
}

.el-menu {
  width: 150px;
  background-color: #FFF;
  border: 0;
}

.el-sub-menu .el-menu-item {
  background-color: rgb(247, 241, 241);
  min-width: 150px;
}

#footer {
  height: 140px;
  background-color: #545c64;
  color: #FFF;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-family: '微软雅黑';
}
</style>